<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test">
        
    </div>
</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<script src="../React-js/react.development.js" type="text/javascript"></script>
<script src="../React-js/react-dom.development.js" type="text/javascript"></script>

<script src="../React-js/babel.min.js"></script>
<!--这里使用了js来创建虚拟DOM-->
<script type="text/babel">
        //1.创建组件
        class St extends React.Component{
            //可以直接对其进行赋值
            state = {isHot:10};
            render(){ //这个This也是实例对象
                console.log(this.state)
                return <h1 onClick = {this.dem}>今天天气很{this.state.isHot?"炎热":"凉爽"}</h1>    
            }
            //箭头函数 [自定义方法--->要用赋值语句的形式+箭头函数]
            dem = (e) =>{
                console.log(e);
                e.preventDefault();
            }
            // componentDidMount(){
            //     document.getElementById("test").addEventListener("click",()=>{
            //         this.setState({
            //             isHot: this.state.isHot + 1
            //         })
                   
            //         this.setState({
            //             isHot: this.state.isHot + 1
            //         })
                    
            //         this.setState({
            //             isHot: this.state.isHot + 1
            //         })
            //     })
            // }
        }
        ReactDOM.render(<St />,document.getElementById("test"));
        
</script>

</html>